<template>
  <div class="homes">
    <h3>房源管理</h3>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="楼盘销售" name="first">
        <div class="select">
          <el-select
            v-model="valueSheng"
            placeholder="请选择省份"
            @change="changeSheng"
          >
            <el-option
              v-for="item in provinces"
              :key="item.id"
              :label="item.province"
              :value="item.provinceid"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="valueShi"
            placeholder="请选择城市"
            @change="changeShi"
          >
            <el-option
              v-for="item in citys"
              :key="item.cityid"
              :label="item.city"
              :value="item.cityid"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="valueXian"
            placeholder="请选择区县"
            @change="changeXian"
          >
            <el-option
              v-for="(item, i) in areas"
              :key="i"
              :label="item.area"
              :value="item.area"
            >
            </el-option>
          </el-select>
          <el-button type="primary" @click="search">搜索</el-button
          ><el-button type="primary" @click="addNew">新增</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column label="楼盘名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.buildName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属地区" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="排序" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sort }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="180">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                :active-value="1"
                inactive-color="#ff4949"
                @change="onChange($event, scope.row.id)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <ul class="operation">
                <li>户型</li>
                <li>相册</li>
                <li>动态</li>
                <li>沙盘</li>
                <li @click="handleEdit(scope.$index, scope.row)">编辑</li>
                <li @click="handleDelete(scope.$index, scope.row)">删除</li>
              </ul>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 房屋租赁 -->
      <el-tab-pane label="房屋租赁" name="second">
        <div class="search">
          <el-input v-model="searchValue" placeholder="请输入内容"></el-input>
          <el-button type="primary" @click="submit">搜索</el-button>
          <el-button type="primary" @click="addRent">新增</el-button>
        </div>
        <el-table :data="tableDataLi" style="width: 100%">
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column label="小区名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.Villagename }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标题" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="面积" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.Size }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总价" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="排序" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sort }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="180">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                @change="onChange($event, scope.row.id)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <ul class="operation">
                <li @click="rentChange(scope.$index, scope.row)">编辑</li>
                <li @click="rentDelete(scope.$index, scope.row)">删除</li>
              </ul>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChangeeae"
            @current-change="changeRentPage"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalF"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="mask" v-show="maskShow">
      <div class="maskInner" v-if="changeWho">
        <h3>新增数据</h3>
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="楼盘名称" prop="pass">
            <el-input
              type="input"
              v-model="ruleForm.buildName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属地区" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.address"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.price"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="更新时间" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.sort"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.state"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="quxiao">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="maskInner" v-else>
        <h3>编辑数据</h3>
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="楼盘名称" prop="pass">
            <el-input
              type="input"
              v-model="ruleForm.buildName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属地区" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.address"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.price"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="更新时间" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.sort"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm.state"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitaaa">提交</el-button>
            <el-button @click="reset">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="mask" v-show="maskShow1">
      <div class="maskInner" v-if="changeWho1">
        <h3>新增数据</h3>
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="小区名称" prop="pass">
            <el-input
              type="input"
              v-model="ruleForm1.Villagename"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="标题" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="面积" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.Size"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="总价" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.price"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.sort"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.state"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="newSub">提交</el-button>
            <el-button @click="cancle">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="maskInner" v-else>
        <h3>编辑数据</h3>
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="小区名称" prop="pass">
            <el-input
              type="input"
              v-model="ruleForm1.Villagename"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="标题" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="面积" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.Size"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="总价" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.price"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.sort"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="checkPass">
            <el-input
              type="input"
              v-model="ruleForm1.state"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="subBian">提交</el-button>
            <el-button @click="cancleBan">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      provinces: [], //省
      citys: [],
      areas: [],
      valueSheng: "",
      valueShi: "",
      valueXian: "",
      idSheng: "",
      idShi: "",
      idXian: "",
      objValue: {
        optValue: "",
        cityValue: "",
        areaValue: "",
      },
      searchValue: "",
      tableData: [],
      tableDataLi: [],
      maskShow: false,
      maskShow1: false,
      changeWho: false,
      changeWho1: false,
      ruleForm: {
        buildName: "",
        address: "",
        price: "",
        time: "",
        sort: "",
        state: "",
      },
      ruleForm1: {
        Villagename: "",
        title: "",
        Size: "",
        sort: "",
        state: "",
      },
      stateTrue: true,
      stateFalse: false,
      currentPage4: 1,
      pageIndex: 1,
      pageNum: 5,
      total: null,
      page: 1,
      pageSize: 5,
      totalF: null,
      rowId: null,
      roid: null,
    };
  },
  methods: {
    changeSheng(value) {
      this.idSheng = value;
      //请求市级数据
      this.$http
        .post("/api/shi", {
          provinceid: value,
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.citys = res.data.data;
          }
        });
    },
    //选择城市
    changeShi(value) {
      this.idShi = value;
      //请求县级数据
      this.$http
        .post("/api/xian", {
          cityid: value,
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.areas = res.data.data;
          }
        });
    },
    //选择县区
    changeXian(value) {
      console.log(this.valueXian);
      this.idXian = value;
    },
    getshen() {
      this.$http.get("/api/sheng").then((res) => {
        if (res.data.code === 1) {
          this.provinces = res.data.data;
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async search() {
      console.log(this.valueSheng, this.valueShi, this.valueXian);
      let res = await this.$http.post("/api/search", {
        shengid: this.valueSheng,
        cityid: this.valueShi,
        area: this.valueXian,
      });
      if (res.data.code === 1) {
        this.$message.success(res.data.message);
        this.tableData = res.data.data;
      } else {
        this.$message.error(res.data.data);
      }
    },
    //编辑楼盘
    handleEdit(index, row) {
      this.changeWho = false;
      this.maskShow = true;
      this.rowId = row.id;

      this.$http
        .post("/api/find", {
          id: row.id,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.ruleForm = {
              buildName: res.data.data[0].buildName,
              address: res.data.data[0].address,
              price: res.data.data[0].price,
              time: res.data.data[0].time,
              sort: res.data.data[0].sort,
              state: res.data.data[0].state,
            };
          }
        });
    },
    //删除楼盘
    handleDelete(index, row) {
      this.$http
        .post("/api/deleteAdd", {
          id: row.id,
        })
        .then((res) => {
          this.$message.success(res.data.message);
          this.changePage(1);
        });
    },
    async getAddress(pageIndex, pageNum) {
      let res = await this.$http.post("/api/changepage", {
        pageIndex: pageIndex,
        pageNum: pageNum,
        state: 1,
      });
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    //新增租赁
    addRent() {
      this.maskShow1 = true;
      this.changeWho1 = true;
    },
    //新增楼盘
    addNew() {
      this.maskShow = true;
      this.changeWho = true;
    },
    //提交新增
    submitForm() {
      this.maskShow = false;
      console.log(this.ruleForm);
      this.$http
        .post("/api/addNewdreass", {
          buildName: this.ruleForm.buildName,
          address: this.ruleForm.address,
          price: this.ruleForm.price,
          time: this.ruleForm.time,
          sort: this.ruleForm.sort,
          state: this.ruleForm.state,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.changePage(1);
            this.ruleForm = {
              buildName: "",
              address: "",
              price: "",
              time: "",
              sort: "",
              state: "",
            };
          }
        });
    },
    //提交编辑
    submitaaa() {
      this.maskShow = false;
      console.log(this.ruleForm);
      this.$http
        .post("/api/updataAddre", {
          id: this.rowId,
          buildName: this.ruleForm.buildName,
          address: this.ruleForm.address,
          price: this.ruleForm.price,
          time: this.ruleForm.time,
          sort: this.ruleForm.sort,
          state: this.ruleForm.state,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.changePage(1);
            this.ruleForm = {
              buildName: "",
              address: "",
              price: "",
              time: "",
              sort: "",
              state: "",
            };
          }
        });
    },
    //取消编辑
    reset() {
      this.maskShow = false;
      console.log(1);
      this.ruleForm = {
        buildName: "",
        address: "",
        price: "",
        time: "",
        sort: "",
        state: "",
      };
    },
    //取消新增
    quxiao() {
      this.maskShow = false;
    },

    //开关
    onChange($event, num) {
      console.log($event); //0 1 0 1
      console.log(num); // 122642  122660
    },
    //分页
    handleSizeChange(val) {
      this.pageNum = val;
      this.changePage(1);
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.changePage(1);
    },
    //封装分页
    changePage(state) {
      this.$http
        .post("/api/changepage", {
          pageIndex: this.pageIndex,
          pageNum: this.pageNum,
          state: state,
        })
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    /* */

    getRental() {
      this.$http
        .post("/api/changepage", {
          pageIndex: this.page,
          pageNum: this.pageSize,
          state: 0,
        })
        .then((res) => {
          this.totalF = res.data.total;
          this.tableDataLi = res.data.data;
        });
    },
    //出租搜索
    submit() {
      console.log(this.searchValue);
      this.$http
        .post("/api/RentalSearch", {
          area: this.searchValue,
        })
        .then((res) => {
          console.log(res);
          this.tableDataLi = res.data;
        });
    },
    //出租分页
    changeRentPage(val) {
      console.log("第: ", val);
      this.page = val;
      this.getRental(this.page, this.pageSize);
    },
    handleSizeChangeeae(val) {
      console.log("每页: ", val);
      this.pageSize = val;
      this.getRental(this.page, this.pageSize);
    },
    //提交  房源出租
    newSub() {
      console.log(this.ruleForm1);
      this.$http
        .post("/api/Rental", {
          Villagename: this.ruleForm1.Villagename,
          title: this.ruleForm1.title,
          Size: this.ruleForm1.Size,
          sort: this.ruleForm1.sort,
          state: this.ruleForm1.state,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.maskShow1 = false;
          }
        });
    },

    //取消新增
    cancle() {
      this.maskShow1 = false;
      console.log("取消新增");
    },
    //编辑
    rentChange(index, row) {
      this.roid = row.id;
      console.log("编辑");
      console.log(index, row);
      this.maskShow1 = true;
      this.changeWho1 = false;
      this.$http
        .post("/api/findRental", {
          id: row.id,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.ruleForm1 = {
              Villagename: res.data.data[0].Villagename,
              title: res.data.data[0].title,
              Size: res.data.data[0].Size,
              price: res.data.data[0].price,
              sort: res.data.data[0].sort,
              state: res.data.data[0].state,
            };
          }
        });
    },
    //删除
    rentDelete(index, row) {
      console.log("删除");
      console.log(index, row);
      this.$http
        .post("/api/deleteRent", {
          id: row.id,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getRental(this.page, this.pageSize);
          }
        });
    },
    //编辑提交
    subBian() {
      console.log("提交编辑");
      this.maskShow1 = false;
      this.$http
        .post("/api/changeRentl", {
          id: this.roid,
          Villagename: this.ruleForm1.Villagename,
          title: this.ruleForm1.title,
          Size: this.ruleForm1.Size,
          price: this.ruleForm1.price,
          sort: this.ruleForm1.sort,
          state: 1,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getRental(this.page, this.pageSize);
          }
        });
    },
    //取消编辑
    cancleBan() {
      console.log("取消编辑");
      this.maskShow1 = false;
      this.ruleForm1 = {
        Villagename: "",
        title: "",
        Size: "",
        price: "",
        sort: "",
        state: "",
      };
    },
  },
  created() {
    this.getAddress(1, 5);
    this.getRental(1, 5);
    this.getshen();
  },
};
</script>

<style scoped lang='scss'>
.homes {
  width: 100%;
  height: 100%;
}
.select {
  width: 100%;
  height: 70px;
  margin: 5px 0;
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  .maskInner {
    width: 700px;
    height: 500px;
    background: white;
    text-align: center;
  }
}
.operation {
  display: flex;
  li {
    margin: 0px 2px;
  }
}
.search {
  width: 500px;
  height: auto;
  display: flex;
  margin-bottom: 10px;
}
</style>